<template>
  <view class="download-list page-background">
    <CustomNavbar title="我的下载" :isBack="true" />
    
    <!-- 空状态提示 -->
    <view v-if="!downloadStore.downloadList.length && !isLoading" class="empty-state">
      <u-empty text="暂无下载记录" mode="list"></u-empty>
    </view>
    
    <!-- 下载列表 -->
    <view v-else class="content">
      <navigator
        v-for="(item,index) in downloadStore.downloadList"
        :key="item._id+String(index)"
        :url="`/pages/preview/index?id=${item._id}`"
        open-type="navigate"
        hover-class="navigator-hover"
      >
        <u-image
          width="100%"
          height="540rpx"
          :src="item.smallPicurl"
          shape="square"
          border-radius="20rpx"
          mode="aspectFill"
        >
          <template #loading><u-loading /></template>
          <template #error><view style="font-size:24rpx">加载失败</view></template>
        </u-image>
      </navigator>
    </view>

    <!-- 加载更多 -->
    <u-loadmore
      v-if="downloadStore.downloadList.length > 0"
      bg-color="rgb(240,240,240)"
      :status="loadStatus"
      @loadmore="loadMoreData"
    />
    
    <!-- 返回顶部 -->
    <u-back-top :scroll-top="scrollTop" />
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'
import { useDownloadStore } from '@/stores/download'
import { $u } from 'uview-pro'
import CustomNavbar from '@/components/UI/custom.vue'

/* ---------- 响应式数据 ---------- */
const isLoading = ref(false)
const scrollTop = ref(0)

/* ---------- store ---------- */
const downloadStore = useDownloadStore()

/* ---------- 计算属性 ---------- */
const loadStatus = computed(() => {
  if (isLoading.value) return 'loading'
  if (!downloadStore.hasMore) return 'nomore'
  return 'loadmore'
})

/* ---------- 滚动监听 ---------- */
onPageScroll(e => scrollTop.value = e.scrollTop)

/* ---------- 加载更多数据 ---------- */
const loadMoreData = async () => {
  if (isLoading.value || !downloadStore.hasMore) return
  
  isLoading.value = true
  downloadStore.nextPage()
  
  try {
    // 模拟从本地存储或其他数据源加载更多数据
    // 这里可以根据实际需求修改数据源
    await loadDownloadData()
  } catch (error) {
    console.error('加载更多失败:', error)
    $u.toast('加载失败，请重试')
  } finally {
    isLoading.value = false
  }
}

/* ---------- 加载下载数据 ---------- */
const loadDownloadData = async () => {
  // 这里可以实现从本地存储、缓存或其他数据源加载下载记录
  // 目前使用store中的数据，后续可以根据需要扩展
  
  // 如果当前数据量小于总数，可以继续加载
  if (downloadStore.downloadList.length < downloadStore.total) {
    // 这里可以实现具体的数据加载逻辑
  }
}

/* ---------- 页面初始化 ---------- */
onMounted(() => {
  // 页面加载时重置分页
  if (downloadStore.pageNum > 1) {
    downloadStore.resetPagination()
  }
  
  // 如果本地有下载数据，加载第一页
  if (downloadStore.downloadList.length === 0 && downloadStore.total > 0) {
    loadDownloadData()
  }
})
</script>

<style scoped lang="scss">
@import '@/common/style/page-background.scss';

.download-list {
  min-height: 100vh;
  
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
  }
  
  .content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 5rpx;
    padding: 10rpx;
  }
}
</style>